<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>获取短信验证码</title>
	<meta content="text/html;charset=utf-8" http-equiv="content-type">
	<link rel="stylesheet" href="{{ URL::asset('/vendor/admin/frame/bootstrap/css/bootstrap.css') }}">
	<script src="{{ URL::asset('/vendor/api/js/jquery.js') }}"></script>
	<style type="text/css">
		.container {
			width: 45%;
			margin: 0 auto;
			border: 2px solid black;
			margin-top: 200px;
		}
		.container2 {
			width: 45%;
			margin: 0 auto;
			margin-top: 200px;
		}
		.title {
			width: 90%;
			height: 50px;
			margin: 0 auto;
			text-align: center;
			line-height: 50px;
			font-size: 28px;
			font-weight: bold;
		}
		.list > input {
			float: left;
			width: 99.5%;
			height: 44px;
			font-size: 18px;
			text-align: center;
		}
		.note {
			display: none;
		}
		.note > input {
			color: red;
		}
		.submits {
			display: table;
			width: 90px;
			height: 40px;
			margin: 10px auto;
			background: #ABCDEF;
			text-align: center;
			line-height: 40px;
			text-decoration: none;
			font-size: 20px;
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="title">短信查询</div>
		<div class="list">
			<input type="text" name="mobile" value="" placeholder="请填写手机号码...">
		</div>
		<div class="list note">
			<input type="text" name="note" value="" readonly="readonly">
		</div>
		<div>
			<a href="javascript:;" class="submits">查询</a>
		</div>
	</div>
<div class="container2">
	<div class="qrcode">
		{!! QrCode::generate(88888); !!}
	</div>

</div>
</body>
<script>

    $('.submits').click(function () {
        var mobile = $('input[name="mobile"]').val();
        $('.note').hide();
        if(mobile)
        {
            $.ajax({
                type: 'post',
                url: "{{ url('api/Sandbox_sendSms') }}",
                data: {"mobile":mobile},
                success: function(data){
                    if(data.status == 1){
                        $('.note').show();
                        $('input[name="note"]').val(data.data);
					}else{
                        $('.note').show();
					}

                },
                error: function(){
                    console.log('请求失败');
                }
            });
        }
        else
        {
            alert('手机号码不能为空!');
        }
    })


</script>

</html>